<template>
  <div id="video-app" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
    <div class="full-tool" v-show="isLeave">
      <svg-icon icon-class="full" class="full" @click="toggleFullscreen(player, videoRef, cameraIndexCode, cameraType)" />
    </div>
    <div class="full-tool" v-show="isLoading">
      <svg-icon icon-class="loading" class="loading" />
    </div>
    <div :id="id" class="video-box" ref="videoRef"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, render } from 'vue';
import usePlayer from './config/usePlayer';
import useFullscreen from './config/useFullscreen';
import useLoading from './config/useLoading';

const props = defineProps(['id', 'value', 'cameraIndexCode', 'cameraType']);

const videoRef = ref<HTMLElement | null>(null);

// Initialize hooks
const { isLeave, mountPoint, handleMouseEnter, handleMouseLeave, toggleFullscreen } = useFullscreen();
const { isLoading, startLoading, stopLoading } = useLoading();
const {
  player,
  currentWindowIndex,
  splitNum,
  playbackRate,
  mseSupport,
  mode,
  isFull,
  createPlayer,
  arrangeWindow,
  realplay: playerRealplay,
  stopPlay
} = usePlayer(props.id);
watch(
  () => isFull.value,
  (newVal) => {
    if (!newVal) {
      if (mountPoint.value) {
        render(null, mountPoint.value); // 卸载
      }
    }
  }
);
const urls = ref({
  realplay: '',
  talk: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
  playback: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S'
});

const playback = ref({
  startTime: '2021-07-26T00:00:00',
  endTime: '2021-07-26T23:59:59',
  seekStart: '2021-07-26T12:00:00',
  rate: ''
});

watch(
  () => props.value,
  (newVal) => {
    urls.value.realplay = newVal;
    realplay();
  }
);

const realplay = async () => {
  if (!urls.value.realplay) return;

  startLoading();
  try {
    await playerRealplay(urls.value.realplay);
    console.log('realplay success');
  } catch (e) {
    console.error(e, '---realplay failed---');
  } finally {
    stopLoading();
  }
};

const initPlayback = () => {
  if (props.value) {
    urls.value.realplay = props.value;
    realplay();
  }
};

const resizePlayer = () => {
  if (player.value && player.value.JS_Resize) {
    player.value.JS_Resize();
  }
};

defineExpose({
  resizePlayer
});

onMounted(() => {
  if (videoRef.value) {
    videoRef.value.style.setProperty('display', 'block');
  }
  setTimeout(initPlayback, 2000);
});
</script>

<style lang="scss" scoped>
#video-app {
  width: 100%;
  height: 100%;
  position: relative;

  .full-tool {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(71, 67, 67, 0.6);
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;

    .full {
      width: 50px;
      height: 50px;
      cursor: pointer;
    }

    .loading {
      width: 50px;
      height: 50px;
      animation: rotate 2s linear infinite;
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }
  }

  .video-box {
    width: 100%;
    height: 100%;
  }
}
</style>
